<!-- 日志模块 -->
<script>
import { getData, postData } from '@/service/getData';

export default {
  data() {
    return {
      activeName: 'first',
      role: 'admin',
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      checkForm: {
        review_id: '',
        action: '通过',
        question_modified: '',
        answer_modified: '',
        rejection_reason: '',
      },
      form: {
        question: '',
        answer: '',
        reviewer_name: '管理员1',
        folder_id: '',
      },
      form2: {
        review_id: '',
        question_modified: '',
        answer_modified: '',
      },
      //  全部列表
      allPairsList: [],
      //  待审核列表
      waitPairsList: [],
      // 审核未通过
      failPairsList: [],
      all_reviews: [],
      treelist: [],
      tableData: [],
    };
  },

  mounted() {
    //  初始化
    if (this.$store.state.user.groups[0]) {
      this.getTree();
      switch (this.$store.state.user.groups[0].name) {
        case '超级管理员':
          this.role = 'super';
          break;
        case '管理员':
          this.role = 'admin';
          break;
        default:
          this.role = 'user';
          break;
      }
    }
    this.getAllPairsList();
    this.getUserList();
  },
  methods: {
    getTree() {
      getData(`api/knowledge_base/files/?user_id=${this.$store.state.user.id}`).then((res) => {
        let targetArr = res;
        let resultArr = [];
        // 递归遍历数组，给每个对象添加label属性
        const traverse = (arr) => {
          arr.forEach((item) => {
            item.label = item.name;
            resultArr.push({
              name: item.name,
              id: item.id,
            });
            if (item.children && item.children.length > 0) {
              traverse(item.children);
            }
          });
        };
        traverse(targetArr);
        this.treelist = resultArr;
      });
    },

    createQa() {
      if (!this.form.folder_id) {
        this.$message.error('请选择目录,若无权限请联系管理员');
        return;
      }

      postData(
        '/api/knowledge_base/snippet/add_snippet/',
        {
          // collection_name: '文档知识库',
          // partition_name: '自定义问答对',
          ...this.form,
        },
        'post',
      )
        .then((res) => {
          this.form = {
            question: '',
            answer: '',
            reviewer_name: '管理员1',
          };
          this.dialogVisible = false;
          this.getAllPairsList();
        })
        .catch((e) => {})
        .finally((v) => {});
    },
    handleOpen() {
      this.getTree();

      this.dialogVisible = true;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    handleOpen3(obj) {
      this.form2.review_id = obj.id;
      this.form2.question_modified = obj.title;
      this.form2.answer_modified = obj.content;
      this.dialogVisible3 = true;
    },
    handleClose3(done) {
      this.dialogVisible3 = false;
    },
    handleOpen2(obj) {
      this.checkForm.review_id = obj.id;
      this.checkForm.question_modified = obj.title;
      this.checkForm.answer_modified = obj.content;
      this.dialogVisible2 = true;
    },
    handleClose2(done) {
      this.dialogVisible2 = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getUserList() {
      postData('/rbac/user/get_user_list').then((res) => {
        // 过滤掉当前用户
        res.user_list = res.user_list.filter(
          (item) => item.username !== this.$store.state.user.username,
        );
        this.tableData = res.user_list;
      });
    },
    getAllPairsList() {
      //  全部列表
      postData('/api/knowledge_base/snippet/get_user_snippet_list/', {}, 'post')
        .then((res) => {
          this.allPairsList = res.data.approved;
          this.waitPairsList = res.data.opened;
          this.failPairsList = res.data.rejected;
        })
        .catch((e) => {})
        .finally((v) => {});
      // 超级管理员 获取全部列表
      if (this.role === 'super') {
        postData('/api/knowledge_base/snippet/get_all_snippet_list/', {}, 'post')
          .then((res) => {
            this.all_reviews = res.data.all_reviews;
          })
          .catch((e) => {})
          .finally((v) => {});
      }
    },

    //  审核
    check() {
      //
      postData(
        '/api/knowledge_base/snippet/review_snippet/',
        {
          ...this.checkForm,
        },
        'post',
      )
        .then((res) => {
          this.dialogVisible2 = false;
          this.getAllPairsList();
        })
        .catch((e) => {})
        .finally((v) => {});
    },
    reopen() {
      //
      postData(
        '/api/knowledge_base/snippet/reopen_snippet/',
        {
          ...this.form2,
        },
        'post',
      )
        .then((res) => {
          this.dialogVisible3 = false;
          this.getAllPairsList();
        })
        .catch((e) => {})
        .finally((v) => {});
    },
  },
};
</script>

<template>
  <div class="mainStyle">
    <div class="contentRight columnFlex">
      <!-- 创建问题 -->
      <div class="btn-line">
        <el-button class="submit-btn" type="primary" size="small" @click="handleOpen">
          创建问题
        </el-button>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待审核列表" name="first">
          <el-table
            :data="waitPairsList"
            class="table-container"
            size="small"
            border
            style="width: 100%"
          >
            <!--  -->
            <el-table-column prop="submitter_name" label="提问人"> </el-table-column>
            <el-table-column prop="created_at" label="时间"> </el-table-column>
            <el-table-column prop="title" label="问题"> </el-table-column>
            <el-table-column prop="content" label="答案"> </el-table-column>
            <el-table-column v-if="role !== 'user'" prop="address" width="200" label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="handleOpen2(scope.row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="审核通过列表" name="second">
          <el-table
            :data="allPairsList"
            class="table-container"
            size="small"
            border
            style="width: 100%"
          >
            <!--  -->
            <el-table-column prop="submitter_name" label="提问人"> </el-table-column>
            <el-table-column prop="created_at" label="时间"> </el-table-column>
            <el-table-column prop="title" label="问题"> </el-table-column>
            <el-table-column prop="content" label="答案"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="审核拒绝列表" name="third">
          <el-table
            :data="failPairsList"
            class="table-container"
            size="small"
            border
            style="width: 100%"
          >
            <!--  -->
            <el-table-column prop="submitter_name" label="提问人"> </el-table-column>
            <el-table-column prop="created_at" label="时间"> </el-table-column>
            <el-table-column prop="title" label="问题"> </el-table-column>
            <el-table-column prop="content" label="答案"> </el-table-column>
            <el-table-column prop="rejection_reason" label="原因"> </el-table-column>
            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="handleOpen3(scope.row)">重新提交</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="全部审核记录" name="DDD" v-if="role === 'super'">
          <el-table
            :data="all_reviews"
            class="table-container"
            size="small"
            border
            height="600px"
            style="width: 100%"
          >
            <!--  -->
            <el-table-column prop="submitter_name" label="提问人"> </el-table-column>
            <el-table-column prop="reviewer_name" label="审核人"> </el-table-column>
            <el-table-column prop="created_at" label="时间"> </el-table-column>
            <el-table-column prop="title" label="问题"> </el-table-column>
            <el-table-column prop="content" label="答案"> </el-table-column>
            <el-table-column prop="rejection_reason" label="原因"> </el-table-column>
            <el-table-column prop="status" label="审核状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 'approved'" type="success">已通过</el-tag>
                <el-tag v-else-if="scope.row.status === 'rejected'" type="danger">已拒绝</el-tag>
                <el-tag v-else type="info">待审核</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 全部列表 -->
      <!-- 待审核列表 -->
    </div>
    <!-- 提交问题 -->
    <el-dialog
      title="创建问题"
      :visible.sync="dialogVisible"
      width="700"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="输入问题">
          <el-input
            v-model="form.question"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入答案">
          <el-input
            v-model="form.answer"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择审批人">
          <el-select v-model="form.reviewer_name" size="small" placeholder="选择审批人">
            <template v-for="item in tableData">
              <el-option
                :label="item.username"
                :value="item.username"
                :key="item.username"
                v-if="item.groups[0] === '超级管理员' || item.groups[0] === '管理员'"
              ></el-option>
            </template>
            <!-- <el-option label="超级管理员1" value="超级管理员1"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="选择目录">
          <el-select v-model="form.folder_id" size="small" placeholder="选择文件生成的目录位置">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in treelist"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="btn-line">
          <el-button type="primary" style="float: right" @click="createQa"> 提交 </el-button>
          <el-button style="float: right; margin-right: 10px" @click="handleClose">
            关闭
          </el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog title="审批" :visible.sync="dialogVisible2" width="700" :before-close="handleClose">
      <el-form ref="form" :model="checkForm" label-width="120px">
        <el-form-item label="问题">
          <el-input
            v-model="checkForm.question_modified"
            :disabled="true"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="答案">
          <el-input
            v-model="checkForm.answer_modified"
            :disabled="true"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="审核结果">
          <el-select v-model="checkForm.action" size="small" placeholder="请选择">
            <el-option label="通过" value="通过"></el-option>
            <el-option label="拒绝" value="拒绝"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原因" v-if="checkForm.action === '拒绝'">
          <el-input
            v-model="checkForm.rejection_reason"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <div class="btn-line">
          <el-button type="primary" style="float: right" @click="check"> 提交 </el-button>
          <el-button style="float: right; margin-right: 10px" @click="handleClose2">
            关闭
          </el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog
      title="重新提交"
      :visible.sync="dialogVisible3"
      width="700"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="输入问题">
          <el-input
            v-model="form2.question_modified"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入答案">
          <el-input
            v-model="form2.answer_modified"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <div class="btn-line">
          <el-button type="primary" style="float: right" @click="reopen"> 提交 </el-button>
          <el-button style="float: right; margin-right: 10px" @click="handleClose3">
            关闭
          </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.mainStyle {
  color: #666;
  background-color: #fff;
  width: calc(100% - 20px);
  margin: 10px;
  height: calc(100% - 20px);
}
.table-container {
  margin-top: 10px;
}
//  样式穿透
.btn-line {
  padding: 20px 0;
  .submit-btn {
    width: 200px;
    float: right;
  }
}
</style>
